<template>
	<view>
		<view  class="top flex-row-space-between">
			<view class="num">
				共：{{list.length}}人
			</view>
			<view @click="toUrl('employeeAdd')" class="add">
				新增员工
			</view>
		</view>
		<view v-for="(item,index) in list" :key="index">
			<view v-if="index" class="line" style="margin: 0 32rpx;">
				
			</view>
			<view class="item ">
				<view class="flex-row-space-between">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<view class="flex1">
						<view class="nickname">
							{{item.nickname}}
						</view>
						<view class="mobile">
							{{item.mobile}}
						</view>
						<view  class="flex-row-space-between">
							<view class="mobile">
								所属门店：{{item.store_name}} 身份：{{item.group_name}}
							</view>
							<view class="">
								
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.group_id!=1"  class="flex-row-flex-end">
					<view @click="storeSetManager(item)"  class="button flex-column-center" >
						<text v-if="item.group_id==3">设为店长</text>
						<text v-if="item.group_id==2">取消店长</text>
					</view>
					<view @click="del(item)" class="button flex-column-center" style="background: red;">
						删除
					</view>
				</view>
				<!-- <uni-icons type="more-filled" size="30"></uni-icons> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		signList,
		staffList,
		staffDel,
		storeSetManager
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
this.loadData()
		},
		onLoad(e) {
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			storeSetManager(item){
				var data = {
					store_id:uni.getStorageSync('storeInfo').id,
					staff_id:item.id,
				}
				storeSetManager(data).then(res => {
					this.showToast(res.msg)
						this.loadData()
				})
			},
				del(item){
					
					var data = {
						staff_id:item.id,
					}
					staffDel(data).then(res => {
						this.showToast(res.msg)
							this.loadData()
					})
				},
			loadData() {

				var data = {
					store_id:uni.getStorageSync('storeInfo').id,
					page: 1,
					page_size:999
				}
				staffList(data).then(res => {
					this.list = res.data.data
				})
			},


		}
	}
</script>

<style lang="scss">
page{
	background:#fff;
}
.top{
	padding: 0 32rpx;
	height: 92rpx;
	background-color: #F7F7FB;
}
.num{
	font-weight: 500;
	font-size: 28rpx;
	color: #666666;
}
.add{
font-weight: 500;
font-size: 28rpx;
color: #157EFE;
}
.item{
	padding: 0 32rpx;
	margin: 20rpx 0;
	// height: 156rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.avatar{
	margin-right: 20rpx;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
}
.nickname{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
}
.mobile{
	margin-top: 4rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #666666;
}
.button{
	margin-top: 20rpx;
	margin-left: 20rpx;
	width: 240*0.6rpx;
	height: 80*0.6rpx;
	background: #157EFE;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #FFFFFF;
}
</style>